<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>产品评价分析详情页</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
    <!-- ace settings handler -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/daterangepicker.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>

	<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
</head>
<body>

<#if flag??>
	<#if flag =='1'>
		<ul class="pager">
			<li class="previous">
				<a href="javascript:;" onclick="history.go(-1)">← 返回</a>
			</li>
		</ul>
	</#if>
	<#if flag =='2'>
		<ul class="pager">
			<li class="previous">
				<a href="javascript:;" onclick="backToCategoryRank()">← 返回</a>
			</li>
		</ul>
	</#if>
	<#if flag =='3'>
		<ul class="pager">
			<li class="previous">
				<a href="javascript:;" onclick="backToProductSort()">← 返回</a>
			</li>
		</ul>
	</#if>
</#if>
<div style="text-align: center;font-weight: 400;"><h3>${productName!""}    (观点提取)</h3></div>
<div style="text-align: center;font-weight: 400;"><h4>${choose_date!""}</h4></div>
<div class="row">
	<div class="col-sm-6">
		<div class="widget-box" style="height: 387px;">
			 <div class="widget-header widget-header-small">
                <h4 style="color:#000;">
					<span>好评观点排名前十<span class="content_name"></span></span>
                    <label class="help_img">
                        <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
						<span class='tips'>某一产品在一段时间内的好评前十名观点</span>
                    </label>
                </h4>
            </div>
            <div class="widget-body" id="HistogramDiv">
                <div id="Histogram"></div>
            </div>
		</div>
	</div>
	<div class="col-sm-6"  style="padding-left: 0px!important;">
		<div  class="widget-box" style="height: 387px;">
			 <div class="widget-header widget-header-small">
				<h4 style="color:#000;">
					<span>好评词云图(好评词汇超过八条显示)<span class="content_name"></span></span>
					<label class="help_img">
						<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
						<span class='tips'>某一产品在一段时间内的好评词汇展示</span>
					</label>
				</h4>
			</div>
			<div class="widget-body" id="cloudChartDiv">
				<div id="cloudChart"  style="width:100%;height:330px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-6">
		<div class="widget-box" style="height: 387px;">
			 <div class="widget-header widget-header-small">
				<h4 style="color:#000;">
					<span>差评观点排名前十<span class="content_name"></span></span>
					<label class="help_img">
						<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
						<span class='tips'>某一产品在一段时间内的差评前十名观点</span>
					</label>
				</h4>
			</div>
			<div class="widget-body" id="Histogram2Div">
				<div id="Histogram2"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-6"  style="padding-left: 0px!important;">
		<div class="widget-box" style="height: 387px;">
			 <div class="widget-header widget-header-small">
				<h4 style="color:#000;"><span></span>
					<span>差评词云图(差评词汇超过八条显示)<span class="content_name"></span></span>
					<label class="help_img">
						<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
						<span class='tips'>某一产品在一段时间内的差评词汇展示</span>
					</label>
				</h4>
			</div>
			<div class="widget-body" id="cloudChart2Div">
				<div id="cloudChart2" style="width:100%;height:330px;"></div>
			</div>
		</div>
	</div>
</div>

<input type="hidden" id="choose_date" value="${choose_date!''}" />
<input type="hidden" id="pcategoryId" value="${pcategoryId!''}" />
<input type="hidden" id="psentiment" value="${psentiment!''}" />
<input type="hidden" id="ptags" value="${ptags!''}" />
<input type="hidden" id="pcategoryName" value="${pcategoryName!''}" />
<input type="hidden" id="timeLabel" value="${timeLabel!''}" />
<input type="hidden" id="flag" value="${flag!''}" class="form-control" />
<input type="hidden" id="overviewDay" value="${overviewDay!''}" />
<input type="hidden" id="ocategoryId" value="${ocategoryId!''}" />
<input type="hidden" id="categoryId" value="${categoryId!''}" />
<input type="hidden" id="isocategory" value="${isocategory!''}" />
<input type="hidden" id="isbackbtn" value="${isbackbtn!''}" />

<input type="hidden" id="showlistcontext" value="${rc.contextPath}">
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- basic scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.easypiechart.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.sparkline.index.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.flot.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.flot.pie.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.flot.resize.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-tab.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/fullcalendar.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.js"></script>

<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<!-- user scripts -->
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/javascripts/g2.js"></script>
<script src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<!-- inline scripts related to this page -->
<script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>
<script src="${rc.contextPath}/javascripts/d3.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
<script type="text/javascript">
		d3.select(self.frameElement).style("height", "1000px");
		$(document).ready(function(event) {
			//好评词云&柱状图
			$.ajax({
				url : '${rc.contextPath}/productComment/goodView?productId=${productId?c}&chooseTime=' + $("#choose_date").val()+'&categoryId='+$("#categoryId").val(),
				type: 'GET',
				dataType:'json',
                beforeSend: function () {
                    openPartialLayer($("#cloudChartDiv"));
                    openPartialLayer($("#HistogramDiv"));
                },
                success: function (data) {
                    makeCloudModal(data.goodView, "cloudChart");
                    var exportForm={
                    	'headers':['观点','数量'],
                    	'cols':['viewpoint','amount']
                    };
                    horizontalHistogramModal(data.preGoodView, 'Histogram', 'viewpoint', 'amount', 330,"", exportForm);
                },
                complete: function () {
                    removeLoading($("#cloudChartDiv"));
                    removeLoading($("#HistogramDiv"));
                }
             });

			//差评词云&柱状图
			$.ajax({
				 url : '${rc.contextPath}/productComment/badView?productId=${productId?c}&chooseTime=' + $("#choose_date").val()+'&categoryId='+$("#categoryId").val(),
				 type: 'GET',
                 dataType: 'json',
                 beforeSend: function () {
                    openPartialLayer($("#cloudChart2Div"));
                    openPartialLayer($("#Histogram2Div"));
                 },
                 success: function (data) {
                    makeCloudModal(data.badView, "cloudChart2");
                    var exportForm={
                    	'headers':['观点','数量'],
                    	'cols':['viewpoint','amount']
                    };
                    horizontalHistogramModal(data.preBadView, 'Histogram2', 'viewpoint', 'amount', 330,"", exportForm);
                 },
                 complete: function () {
                    removeLoading($("#cloudChart2Div"));
                    removeLoading($("#Histogram2Div"));
                 }
			});
		});

		// 返回品类评价排名
		function backToCategoryRank() {
			var choose_date = $("#choose_date").val();
			// 区别品类页面是否有[返回]按钮
			if(null != $("#isbackbtn").val() && "" != $("#isbackbtn").val() && $("#isbackbtn").val() == "0") {
                $("#flag").val(null);
			}
            var url = "${rc.contextPath}/category/categoryRank?choose_date=" + choose_date
				+ "&categoryId=" + $("#pcategoryId").val() + "&sentiment=" + $("#psentiment").val() + "&tags="
				+ $("#ptags").val() + "&categoryName=" + $("#pcategoryName").val() + "&timeLabel=" +
			    $("#timeLabel").val() + "&flag=" + $("#flag").val() + "&overviewDay=" + $("#overviewDay").val()
			    + "&ocategoryId=" + $("#ocategoryId").val() + "&isocategory=" + $("#isocategory").val() +
				"&isbackbtn=" + $("#isbackbtn").val();
            window.location.href = url;
        }

        // 返回产品评价排名
        function backToProductSort() {
            var selectedTime = "${selectedTime!''}";
			var choose_date = $("#choose_date").val();
			var categoryId = $("#categoryId").val();
			var flag=2;
            var url = "${rc.contextPath}/productComment/productSort?choose_date=" + choose_date
                +"&procategoryId=" + categoryId +"&flag=" + flag + '&selectedTime=' + selectedTime;
            window.location.href = url;

        }
</script>

</body>
</html>